<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>荔枝瑰夏</title>
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta name="keywords"
        content="荔枝瑰夏,MCAKE官网,蛋糕在线预订,生日蛋糕,儿童蛋糕,商务蛋糕,婚庆蛋糕,拿破仑蛋糕,奶油蛋糕,慕斯蛋糕,芝士蛋糕,巧克力蛋糕,坚果蛋糕,乳酪蛋糕,水果蛋糕,冰激凌蛋糕">
    <meta name="description" content="平阴重瓣玫瑰洋洋洒洒,云南玫瑰花酱馥郁芬芳,Q弹的荔枝果肉口感十足,清爽甜蜜。果味与花香交织,写尽夏日奇幻浪漫。">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{text-decoration:none}
        .img_1{
            margin-top: 39px;
            text-align: center;
        }
        .img_1 img{
            width: 100%;
        }
        .tou{
            position: fixed;
            background: white;
            width: 100%;
            display: flex;
            align-items: center;
            height: 200px;
            z-index: 100;
            justify-content: space-between;
        }
        .kg p{
            font-size:80px;
        }
        .kg span{
            font-size: 55px;
        }
        .kg_1{
           text-align: center;
        }
        .xg .xg_1{
            display: flex;
            width: 100%;
            height: 140px;
            margin: 20px;
            color: gray;
            background-color: rgb(255, 227, 42);
            border-radius: 66px;
            justify-content: center;
        }
        .gwc{
            position: fixed;
            z-index: 100;
            display: flex;
            background: white;
            height: 200px;
            bottom: 0;
        }
        .gwc button{
            background: rgb(255, 227, 42);
            border-radius: 30px;
           width: 662px;
           height: 200px;
           font-size: 66px;
           border: none;
        }
    </style>
</head>

<body>
    <div id="app">
            <div class="tou">
                <a href="cake2.html"><span style="font-size: 100px;color: gainsboro;margin-left: 50px;"><</span></a>
                <div><img src="./img/logo.png" width="800px" alt=""></div>
                <div><a href="ShoppingCart2.html"><img src="./img/bag1.png" style="margin-right: 50px;width: 100px;" alt=""></a></div>
            </div>
            <div style="height: 200px;width: 1px;"></div>
    <!-- 内容 -->
    <div class="detail-content" data-id="18638">
        <div class="img">
            <img :src="getImgUrl(dg_id.img)" width="1320px"/>
        </div>
        <div style="width: 1300px;">
            <div>
                <div class="kg">
                    <div class="top-left">
                        <div class="info">
                            <div class="kg_1">
                                <!-- <img :src="getImgUrl(dg_id.img)"  style="margin: 0 auto;"/> -->
                                <p>{{dg_id.name}}<span class="pingjia-span"></span></p>
                                <div class="right-t">
                                    <span class="span02">{{dg_id.english}}</span>
                                    <!--<span class="span01">提前5小时预定</span>-->
                                    <p>
                                        <span style="margin-left: 0;" class="tag">{{dg_id.type.t_type}}</span>
                                        <span style="margin-left: 0;" class="tag">{{dg_id.fl.cf}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="xg">
                        <div
                            data-data="W3siaWQiOjE4NjM5LCJza3UiOiJDMTEwMSIsImFoZWFkIjoiXHU2M2QwXHU1MjRkNVx1NWMwZlx1NjVmNlx1OTg4NFx1NWI5YSIsImVkaWJsZSI6IjItM1x1NGViYVx1OThkZiIsIm5hbWUiOiJcdTgzNTRcdTY3OWRcdTc0NzBcdTU5MGYiLCJmcmVuY2giOiJMeWNoZWUgUm9zXHUwMGU5IGQnXHUwMGM5dFx1MDBlOSIsInNwZWMiOiIxXHU3OGM1Iiwic2FsZVByaWNlIjoiMjE4LjAwIiwicHByaWNlIjoiMjE4LjAwIiwic2l6ZSI6IjEzY20qN2NtIiwiY2l0eUlkIjo2NDEsInVzZUZsZyI6MSwid2VpZ2h0IjoiNDU0ZyIsImZpdHRpbmdzIjp7IjUxIjp7ImlkIjo1MSwibmFtZSI6Ilx1OTkxMFx1NTE3NyIsInVpZCI6MSwidW5hbWUiOiJcdTU5NTciLCJudW0iOjUsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6IiIsImJ1eSI6MH0sIjUzIjp7ImlkIjo1MywibmFtZSI6Ilx1NzUxZlx1NjVlNVx1ODcyMVx1NzBkYiIsInVpZCI6NSwidW5hbWUiOiJcdTY1MmYiLCJudW0iOjEsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6Imh0dHA6XC9cL3d3dy5tY2FrZS5jb21cL3Bvc3RzeXN0ZW1cL2RvY3Jvb3RcL2ltYWdlc1wvc3lzdGVtXC9maXR0aW5nc1wvMjAxNzA5MjdcLzIwMTcwOTI3MTMyNDA3NjY0MzguanBnIiwiYnV5IjowfX0sInBpYyI6eyJ1cmwiOiJodHRwczpcL1wvc3RhdGljLm1jYWtlLmNvbVwvbmV3X2dvb2RzXC9saXpoaWd1aXhpYSIsImxpc3QiOlt7ImIiOiJcL2JpZ1wvMS5qcGciLCJtIjoiXC9taWRkbGVcLzEuanBnIiwicyI6Ilwvc21hbGxcLzEuanBnIn0seyJiIjoiXC9iaWdcLzIuanBnIiwibSI6IlwvbWlkZGxlXC8yLmpwZyIsInMiOiJcL3NtYWxsXC8yLmpwZyJ9LHsiYiI6IlwvYmlnXC8zLmpwZyIsIm0iOiJcL21pZGRsZVwvMy5qcGciLCJzIjoiXC9zbWFsbFwvMy5qcGcifSx7ImIiOiJcL2JpZ1wvNC5qcGciLCJtIjoiXC9taWRkbGVcLzQuanBnIiwicyI6Ilwvc21hbGxcLzQuanBnIn1dfSwiZnJvbSI6MH0seyJpZCI6MTg2NDAsInNrdSI6IkMxMTAyIiwiYWhlYWQiOiJcdTYzZDBcdTUyNGQ1XHU1YzBmXHU2NWY2XHU5ODg0XHU1YjlhIiwiZWRpYmxlIjoiNC03XHU0ZWJhXHU5OGRmIiwibmFtZSI6Ilx1ODM1NFx1Njc5ZFx1NzQ3MFx1NTkwZiIsImZyZW5jaCI6Ikx5Y2hlZSBSb3NcdTAwZTkgZCdcdTAwYzl0XHUwMGU5Iiwic3BlYyI6IjJcdTc4YzUiLCJzYWxlUHJpY2UiOiIzMTguMDAiLCJwcHJpY2UiOiIzMTguMDAiLCJzaXplIjoiMTdjbSo3Y20iLCJjaXR5SWQiOjY0MSwidXNlRmxnIjoxLCJ3ZWlnaHQiOiI5MDhnIiwiZml0dGluZ3MiOnsiNTEiOnsiaWQiOjUxLCJuYW1lIjoiXHU5OTEwXHU1MTc3IiwidWlkIjoxLCJ1bmFtZSI6Ilx1NTk1NyIsIm51bSI6MTAsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6IiIsImJ1eSI6MH0sIjUzIjp7ImlkIjo1MywibmFtZSI6Ilx1NzUxZlx1NjVlNVx1ODcyMVx1NzBkYiIsInVpZCI6NSwidW5hbWUiOiJcdTY1MmYiLCJudW0iOjEsInNhbGUiOjAsInByaWNlIjoiMC4wMCIsImltZyI6Imh0dHA6XC9cL3d3dy5tY2FrZS5jb21cL3Bvc3RzeXN0ZW1cL2RvY3Jvb3RcL2ltYWdlc1wvc3lzdGVtXC9maXR0aW5nc1wvMjAxNzA5MjdcLzIwMTcwOTI3MTMyNDA3NjY0MzguanBnIiwiYnV5IjowfX0sInBpYyI6eyJ1cmwiOiJodHRwczpcL1wvc3RhdGljLm1jYWtlLmNvbVwvbmV3X2dvb2RzXC9saXpoaWd1aXhpYSIsImxpc3QiOlt7ImIiOiJcL2JpZ1wvMS5qcGciLCJtIjoiXC9taWRkbGVcLzEuanBnIiwicyI6Ilwvc21hbGxcLzEuanBnIn0seyJiIjoiXC9iaWdcLzIuanBnIiwibSI6IlwvbWlkZGxlXC8yLmpwZyIsInMiOiJcL3NtYWxsXC8yLmpwZyJ9LHsiYiI6IlwvYmlnXC8zLmpwZyIsIm0iOiJcL21pZGRsZVwvMy5qcGciLCJzIjoiXC9zbWFsbFwvMy5qcGcifSx7ImIiOiJcL2JpZ1wvNC5qcGciLCJtIjoiXC9taWRkbGVcLzQuanBnIiwicyI6Ilwvc21hbGxcLzQuanBnIn1dfSwiZnJvbSI6MH1d">
                            <div v-for="kg_id in kg" :key="kg_id.id" class="xg_1">
                                <p><input type="radio" name="kg" v-model="dg_id.kg
                                " :value="kg_id.kg">{{kg_id.kg}}</p>
                                <p><input type="radio" name="price" v-model="dg_id.price
                                " :value="kg_id.price">
                                ￥{{kg_id.price}}</input></p>
                            </div>
                            <hr>
                        </div>
                        <div class="">
                            <div class="">
                                <div class="">
                                    <p class="">
                                        <img
                                            src="https://h5.mcake.com/static/images/icon_nb1.png">
                                        <span>含5套餐具</span>
                                    </p>
                                    <hr>
                                    <span class="size">生产日期：{{dg_id.date}}</span>
                                    <span style="color: #f0250f;margin-top: 20px;"><i
                                            class="icon-gantanhao"></i>蛋糕若不及时食用请放置0-10℃冷藏</span>
                                </div>
                                <p style="text-align: center;">商品详情</p>
                                <hr style="background: yellow;height: 20px;width: 1326px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gwc">
                    <button style="background: rgb(133, 122, 114);color: white;">立即订购</button>
                    <button @click="add(dg_id)">加入购物车</button>
                </div>
                <div class="img_1">
                    <img :src="getImgUrl2(dg_id.img3)" style=" margin:  auto;"/>
                </div>
                <div style="width: 1;height: 200px;"></div>
                <div class="detail-ad">
                </div>
            </div>
        </div>
    </div>
    <!--添加到购物车 弹窗 -->
    <div id="pop"></div>
</div>
</div>
</div>
</div>
</div>

    <script id="pop-goods-select" type="text/x-jquery-tmpl"></script>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                type:[],
                kg_id:[],
                kg:{},
                dg_id:{
                    k:{id:"",kg:""}
                 },
            },
            
            created() {
                // axios.get("http://127.0.0.1:1234/Type/type")
                // .then(rep => {
                //     this.type = rep.data;
                //     console.log(this.type)
                // })

                axios.get("http://127.0.0.1:1234/Kg/kg")
                 .then(rep => {
                     this.kg = rep.data;    
                     console.log(this.kg)
                 })

                    this.dg_id.id = getParameterByName("id")

                axios.get("http://127.0.0.1:1234/Dg/" + this.dg_id.id)
                    .then(res => {
                        this.dg_id = res.data;
                        console.log(this.dg_id)
                    })
            },

            methods:{
                getImgUrl(name){
                    return "/appimg/"+name
                },
                getImgUrl2(name){
                    return "/image/"+name
                },
          add(dg_id){
            axios
              .post(`http://127.0.0.1:1234/Dg`, dg_id)
                    .then((response) => {
                        if (response.data === 1) {
                            alert("添加到购物车成功！");
                        }
                    })
                    .catch((err) => {
                        alert(err);
                    });
          },
            }
        })
        window.alert = alert;
        function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
        results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return "";
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    </script>

</body>

</html>